<template>
  <div class="mask-container" v-show="isShow">
    <div class="mask" @click="hidenMask"></div>
    <slot></slot>
  </div>
  <!-- <van-popup
    v-model="isShow"
    @click-overlay="hidenMask"
    position="bottom"
    :style="{ height: height }"
  >
    <slot></slot>
  </van-popup> -->
</template>

<script>
export default {
  props: {
    isShowPop: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
      default: "30%",
    },
  },
  data() {
    return {
      isShow: false, //false：不展示底部弹出层
    };
  },
  watch: {
    isShowPop(val) {
      console.log(this.isShowPop);
      this.isShow = val;
    },
  },
  methods: {
    //点击遮罩层消失
    hidenMask() {
      this.$emit("hidenMask", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.mask-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  .mask {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>